<template>
  <div style="display: inline-block">
    <el-button type="danger" @click="toStock" :loading="loading">转为库存</el-button>
    <el-dialog
      title="确认当前商品转为库存？"
      :visible.sync="dialog"
      width="500px"
    >
      <div class="dialog-content">
        <span>当前订单已取消，如果商品完好可再次销售，可将该商品重新转为库存，用于下次发货</span>
        <p class="font-red">请选择需要转为库存的商品</p>
        <div class="goods-item">
          <el-checkbox></el-checkbox>
          <div class="goods-img">
            <img src="https://oss-cdn.minodm.com/uploads/1274573737/1274700260/goods/MCO1286018949.jpeg" alt="">
          </div>
          <div class="listing">
            MLM11111 (SDFSDFDSFDS)
          </div>
        </div>
        <div class="goods-item">
          <el-checkbox></el-checkbox>
          <div class="goods-img">
            <img src="https://oss-cdn.minodm.com/uploads/1274573737/1274700260/goods/MCO1286018949.jpeg" alt="">
          </div>
          <div class="listing">
            MLM11111 (SDFSDFDSFDS)
          </div>
        </div>
        <div class="goods-item">
          <el-checkbox></el-checkbox>
          <div class="goods-img">
            <img src="https://oss-cdn.minodm.com/uploads/1274573737/1274700260/goods/MCO1286018949.jpeg" alt="">
          </div>
          <div class="listing">
            MLM11111 (SDFSDFDSFDS)
          </div>
        </div>
        <p class="font-red">请选择是否退回本次贴单费用</p>
        <div>
          <span style="font-weight: bold">贴单费用：</span>
          <el-button :type="currentForm.backAmount === 0 ? 'primary' : ''" @click="currentForm.backAmount = 0">不退回</el-button>
          <el-button :type="currentForm.backAmount === 1 ? 'primary' : ''" @click="currentForm.backAmount = 1">退回</el-button>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: left">
        <el-button>取 消</el-button>
        <el-button type="primary" @click="submitForm" :disabled="true">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>


export default {
  name: "ToStockButton",
  props:{
    data:{
      type: Object,
    }
  },
  data(){
    return {
      loading: false,
      dialog: false,
      currentForm: {
        orderGoodsId: [],
        backAmount: 0, // 是否退款金额
      }
    };
  },
  methods:{
    toStock(){
      this.dialog = true;
    },
    submitForm(){

    }
  }
}
</script>

<style scoped lang="scss">
.dialog-content{
  .goods-item{
    display: flex;
    height: 30px;
    width: 100%;
    line-height: 30px;
    margin: 10px 0;
    .goods-img{
      margin: 0 10px;
      width: 35px;
      height: 35px;
      border-radius: 5px;
      background-color: #eee;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      display: flex;
      img{
        width: 30px;
        height: 30px;
      }
    }
  }
}
</style>
